import React, { FC } from "react";
import { Typography } from "antd";
import { nanoid } from "@reduxjs/toolkit";
import {
  ComponentConfGroup,
  ComponentConfType,
} from "../../../components/QusetionComponent";
import { addComponent } from "../../../store/componentsReducer";
import styles from './Component.module.scss'
import { useDispatch } from "react-redux";
const { Title } = Typography;


const ComponentLib: FC = () => {
    
    const dispatch=useDispatch()
    const getComponent = (c: ComponentConfType) => {
        const { title, type, Component, defaultProps } = c;
        const handleClick = () => {
            dispatch(addComponent({
                fe_id: nanoid(),
                title,
                type,
                props:defaultProps
            }))
        }
      return (
          <div key={type} className={styles.wrapper} onClick={()=>handleClick()}>
              <div className={styles.component}>
              <Component />
              </div>
        </div>
      );
    };
  return (
    <>
      {ComponentConfGroup.map((group, index) => {
        return (
          <div key={group.groupId}>
            <Title
              level={3}
              style={{
                fontSize: "15px",
                marginTop: index > 0 ? "20px" : "0px",
              }}
            >
              {group.groupName}
            </Title>
            <div>{group.components.map((c) => getComponent(c))}</div>
          </div>
        );
      })}
    </>
  );
};
export default ComponentLib;
